<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{time}}</p>
    <p v-once>{{age}}</p>
    <h1 v-html="tagInfo"></h1>
    <p>{{msg}}</p>
    <p>{{!isOk?1:2}}</p>
    <input type="text" v-model="age">
    <br>
    <img v-bind:src="pic" alt="不正常">
    <a v-bind:href="page">xxxx</a>
    <!-- 有v-bind时，属性值为变量；否则是字符串 -->
    <p :twrqtf="attr1" twrqt="attr1">msg</p>
    <!-- v-bind的缩写是“:” -->
    <!-- <p twrqtf="page87878" twrqt="attr1">msg</p> -->
    <p style="color: red;">实现以下功能：修改输入框，图片随之变化</p>
    <img :src="picName" width="60%">
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        time: new Date(),
        msg: 'Cannot read property of undefined',
        age: 1,
        tagInfo: '<p style=color:red>我是P标签</p>',
        person: {
          name: 'Jack',
        },
        isOk: false,
        pic: '../img/patient_pic.png',
        page: 'xxxx.html',
        attr1: 'page87878',
        picName: '',
        picIndex: 1
      },
      beforeCreate() {
        
      },
      created() {
        
      },
      beforeMount() {
        
      },
      mounted() {
        console.log(this.time)
        if(true) {
          this.page = 'xxxx'
        }else {
          this.page = 'yyyy'
        }
      },
      beforeUpdate() {
        this.time = new Date();
        if(this.picIndex) {
          this.picIndex ++
          this.picName = `../img/pic${this.picIndex}.png`
        }
      },
      updated() {
        
      },
      beforeDestroy() {
        
      },
      destroyed() {
        
      },
    })
  </script>
</body>
</html>